const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // Vue开发中如何解决跨域
  //  通过服务器代理的方式
  //  注意点:一旦修改配置，一定要重启服务器, ctrl+c 退出服务器,启动命令启动

  // 当发送的请求是不同的服务器,则需要区分配置
  // 开发服务器的跨域的配置 ,如果是生产环境则无效,因为是打包后交给后端处理跨域
  devServer: {
    proxy: {
      // 自定义名字即命名
      '/api': {
        //然后把本机的服务器地址替换成真实服务器地址
        //真实服务器地址
        // target: "http://kumanxuan1.f3322.net:8881/cms",
        target:process.env.VUE_APP_BASE_URL,
        pathRewrite: {
          //key是正则表达式， 当请求地址是以 /api开头的,则替换成空字符串
          '^/api': ''
        }

        // 配置环境变量: 
        // 目的：我们在不同环境下,服务器不同,切换开发服务器和生产服务器的解决方式。如：开发环境、生产环境、测试环境 
        // 解决方案:
        // 方案1.手动切换服务器地址 即注释切换  不推荐,不科学
        // target: "http://kumanxuan1.f3322.net:8881/cms",
        // target: "http://kumanxuan1.f3322.net:8881/cms",

        // 方案2.配置环境变量，通过启动命令来区分环境，从而自动切换地址
        // 1.定义环境  
        //    在根目录下创建 .env.环境文件名 如: .env.dev  ,  .env.prod
        //    声明环境：NODE_环境名 如：NODE_ENV=production  , NODE_ENV=development
        // 2.定义环境变量(大写)：VUE_APP_变量名  如: VUE_APP_BASE_URL= http://localhost:8080
        // 3.获取环境变量(组件和js文件都可获取): process.env.变量 如:process.env.VUE_APP_BASE_URL
        //    如: target:process.env.VUE_APP_BASE_URL
        // 4.在启动命令后加设置启动模式：--mode 环境文件名
        //    如："servedev": "vue-cli-service serve --mode dev",
        //    如果要启动命令后自动打开浏览器, "serveprod": "vue-cli-service serve --open --mode prod",
        // 5.通过启动命令来区分环境变量，从而自动切换地址。记得修改该配置文件,要重启服务器
      }
    }
  }
})
